<template>
  <el-form ref="ruleForm" v-model="user" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model.trim="user.username" disabled />
    </el-form-item>
    <el-form-item label="昵称" prop="name">
      <el-input v-model.trim="user.name" disabled >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
<!--      <el-button type="primary" @click="submit">Update</el-button>-->
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="user.password" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">Update</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { resetPassword } from '@/api/user'
export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '',
          password: ''
        }
      }
    }
  },
  data() {
    return {
      rules: {
        username: [],
        password: [
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          resetPassword(this.user).then(
            res => {
              console.log(res)
              if (res.status === 200) {
                this.$message({
                  message: 'User information has been updated successfully',
                  type: 'success',
                  duration: 5 * 1000
                })
              }
            }
          )
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
